<template>
  <div class="content">
    <div class="left">
      <span>姓名: </span>
    </div>
    <div class="right">
      <el-input v-model="name" placeholder="请输入姓名" />
    </div>
  </div>
  <div class="content">
    <div class="left">
      <span>性别: </span>
    </div>
    <div class="right">
      <el-radio-group v-model="gender">
        <el-radio value="男" size="large">男</el-radio>
        <el-radio value="女" size="large">女</el-radio>
      </el-radio-group>
    </div>
  </div>
  <div class="content">
    <div class="left">
      <span>爱好: </span>
    </div>
    <div class="right">
      <el-checkbox-group v-model="likeList">
        <el-checkbox label="吃" value="吃" />
        <el-checkbox label="喝" value="喝" />
        <el-checkbox label="玩" value="玩" />
        <el-checkbox label="乐" value="乐" />
      </el-checkbox-group>
    </div>
  </div>

  <div class="content">
    <div class="left">
      <span>我的口号: </span>
    </div>
    <div class="right">
      <el-input v-model="mycall" type="textarea" placeholder="请输入我的口号" />
    </div>
  </div>

  <div class="content">
    <div class="left">
    </div>
    <div class="right">
      <el-button type="primary" @click="submit">提交</el-button>
    </div>
  </div>

  <hr />
  <el-row align="middle">
    <el-col :span="6">
      <span>姓名:</span>
    </el-col>
    <el-col :span="18">
      <el-input v-model="name" placeholder="请输入姓名" />
    </el-col>
  </el-row>

  <el-row align="middle">
    <el-col :span="6">
      <span>性别:</span>
    </el-col>
    <el-col :span="18">
      <el-radio-group v-model="gender" class="ml-4">
        <el-radio value="男" size="large">男</el-radio>
        <el-radio value="女" size="large">女</el-radio>
      </el-radio-group>
    </el-col>
  </el-row>

  <el-row align="middle">
    <el-col :span="6">
      <span>爱好:</span>
    </el-col>
    <el-col :span="18">
      <el-checkbox-group v-model="likeList">
        <el-checkbox label="吃" value="吃" />
        <el-checkbox label="喝" value="喝" />
        <el-checkbox label="玩" value="玩" />
        <el-checkbox label="乐" value="乐" />
      </el-checkbox-group>
    </el-col>
  </el-row>

  <el-row align="middle">
    <el-col :span="6">
      <span>我的口号:</span>
    </el-col>
    <el-col :span="18">
      <el-input v-model="mycall" type="textarea" placeholder="请输入口号" />
    </el-col>
  </el-row>

  <el-row align="middle">
    <el-col :span="6">
    </el-col>
    <el-col :span="18">
      <el-button type="primary" @click="submit">提交</el-button>
    </el-col>
  </el-row>


</template>

<script setup>
// import { ref } from 'vue'

// const name = ref('')
// const gender = ref('男')
// const likeList = ref([])
// const mycall = ref('')

// const submit = () => {
//   alert(`我是${name.value},${gender.value},我喜欢${likeList.value},我的口号是${mycall.value}`)
// }


import { ref } from 'vue'

const name = ref('')
const gender = ref('男')
const likeList = ref([])
const mycall = ref('')

const submit = ()=>{
  alert(`我是${name.value},${gender.value},我喜欢${likeList.value},我的口号是${mycall.value}`)
}



</script>



<style scoped>
.el-row {
  margin: 20px !important;
  width: 500px;
}

.content {
  margin: 20px;
  display: flex;
  width: 500px;
  align-items: center;
}

.left {
  width: 125px;
}

.right {
  flex: 1;
}
</style>